<template>
  <div>
    <!-- 导航 -->
    <xwBreadCrumb :items="crumbItems" />
    <div class="search">
      <el-input v-model="kw" ref="kwRef" placeholder="请输入角色名称" clearable />
      <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索一下</el-button>
      <Btn action="addRole" icon="el-icon-plus" type="success" @actionFn="visible = true">添加角色</Btn>
    </div>
    <!-- 表单数据 -->
    <div class="tableBox">
      <roleTable :tableData="tableData" :total="total" @handleEdit="handleEdit" />
    </div>
    <!-- 弹层 -->
    <roleForm :visible.sync="visible" />
  </div>
</template>

<script>
import roleTable from './ui/roleTable.vue'
import roleForm from './ui/roleForm.vue'
import { errorMsg } from '@/utils/msg'
import Btn from '@/components/Btn'
import { getRolesApi } from '@/api/roleApi'
export default {
  components: {
    roleTable,
    Btn,
    roleForm
  },
  // 此方案可以用混入来精简代码
  data() {
    return {
      crumbItems: [],
      kw: '',
      visible: false,
      tableData: [],
      total: 0
    }
  },
  created() {
    this.crumbItems = this.$route.meta.crumbItems || []
    this.loadData()
  },
  methods: {
    async loadData(page = 1) {
      let ret = await getRolesApi(page)
      this.tableData = ret.data.roles
      this.total = ret.data.total
    },
    onSearch() {},
    handleEdit() {}
  }
}
</script>

<style lang="scss" scoped>
.search {
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
  .el-input {
    width: 300px;
    margin-right: 20px;
  }
}
</style>
